<template>
  <div class="page-search">
    <Hyform v-bind="props.searchFormConfig" v-model="formData">
      <template #btns>
        <el-button :icon="Search" @click="handleSearchClick">搜索</el-button>
        <el-button :icon="Refresh" @click="handleResetClick">重置</el-button>
      </template>
    </Hyform>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import Hyform from '@/base-ui/HyForm/hy-form.vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { useStore } from 'vuex';
const props = defineProps({
  searchFormConfig: {
    type: Object,
    required: true
  }
});
const store = useStore();
const emits = defineEmits(['handleSearchClick', 'handleResetClick']);
// 动态来设置formData中的属性
const formItems = props.searchFormConfig.formItems ?? [];
const formData: any = ref({});
for (const item of formItems) {
  formData.value[item.field] = '';
}
// vuex中保存搜索信息
store.commit('system/saveSearchInfo', formData.value);
// watch(
//   formData,
//   (newVal) => {
//     console.log(newVal);
//     store.commit('system/saveDefaultFormData', { ...newVal });
//   },
//   {
//     deep: true
//   }
// );
//

// 重置
const handleResetClick = () => {
  // formData.value = { ...fromOriginData };
  for (const key in formData.value) {
    formData.value[key] = '';
  }
  store.commit('system/saveSearchInfo', formData.value);
  emits('handleResetClick', { ...formData.value });
};
// 搜索
const handleSearchClick = () => {
  // 处理日期选择器
  if (formData.value.createAt === null) formData.value.createAt = '';
  store.commit('system/saveSearchInfo', formData.value);
  emits('handleSearchClick', { ...formData.value });
};
</script>

<style scoped></style>
